20. Bijlagen 


Netwerk standaarden 

Computers kunnen met elkaar communiceren als ze dat op dezelfde manier doen. 
Zijn moeten voldoen aan een aantal afspraken om elkaar te verstaan. De afspraken 
zijn vastgelegd in netwerk standaarden: 


WiFi 

Er bestaan meerder manieren om computers fysiek met elkaar te verbinden: met 
koperen kabels, met glasvezel of draadloos. WiFi is de standaard voor draadloze 
lokale netwerken. De ESP-chips hebben hard- en software aan boord voor draadloze 
WiFi toegang. De ESP’s ondersteunen WiFi 802.11 b/g/n. 


IP: Internet Protocol 

IP is de standaard voor de adressering van computers. Elke computer die met andere 
computers communiceert moet een uniek adres hebben. Sommige toestellen 
hebben een vast ingesteld adres, andere gebruiken tijdelijke adressen. Die worden 
toegekend door een DHCP-server, die is een onderdeel van de router op ons lokale 
netwerk of die maken we zelf met een ESP-controller en MicroPython. 


Een IPv4 adres bestaat uit 32 bits of 4 bytes, er zijn dus 2% = 4294967296 adressen 
beschikbaar voor Internet. Het eerste deel van het adres is het netwerkadres, de rest 
geeft het toestel aan binnen het lokale netwerk. Het subnetmask geeft aan welk 
deel netwerkadres is. Het gateway-adres geeft aan op welke manier toestellen 
buiten het lokale netwerk bereikbaar zijn. 


Voorbeeld: 

IP =192.168.1.33 

Subnetmask: 255.255.255.0 

Gateway: 192.168.1.1 
Het netwerkadres is 192.168.1: alle toestellen met een adres dat begint met deze 
getallen behoren tot hetzelfde lokale LAN. Een verbinding met een toestel buiten dit 
LAN gebeurt via de gateway of router. 


IPv6 adressen bestaan uit 16 bytes. Dit levert een quasi onbeperkte hoeveelheid 
adressen. Door de snelle groei van Internet raken de IPv4 adressen op. Internet 
schakelt geleidelijk over van IPv4 naar IPv6. 
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TCP en UDP 

Informatie wordt over het netwerk verstuurd in pakjes . TCP en UDP zorgen voor de 
verdeling in pakjes aan de zenderkant en voor het terug aan elkaar zetten van de 
pakjes, in de juiste volgorde aan de ontvangerkant. 


TCP zorgt ook voor foutendetectie en correctie. Pakjes met fouten worden een 
tweede keer door het netwerk gestuurd. TCP wordt daarom gebruikt als informatie 
zonder fouten moet toekomen. Mailsystemen werken over TCP. 


UDP werkt zonder foutencorrectie en werkt dan ook sneller. UDP wordt gebruikt als 
de timing van een signaal belangrijk is dan het wegwerken van eventuele foutjes. 
Telefonie en videoconferentie gebruiken UDP 


Toepassingsprotocollen 

Netwerktoepassingen werken met TCP/IP of UDP/IP netwerklagen. Elke toepassing 
volgt zijn eigen standaard: Webservices werken volgens de http-standaard, 
mailsystemen gebruiken er weer andere. Elke toepassing heeft een eigen 
poortnummer, een code die de client bij elke datapakket doorstuurt naar de server 
en waarmee de server dan weet naar welke toepassing het pakket moet gestuurd 
worden. Een webserver heeft poort 80. De client stuurt ook een eigen poort- 
nummer mee, de antwoordpakketten van de server worden hiermee op naar de 
juiste clienttoepassing gestuurd. 


Protocollen en de ESP32 
WiFi, IP, TCP en UDP zijn ingebakken in de ESP chip. Toepassingen worden in de 
sketches geprogrammeerd. 
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Html in een notendop 
Dit is geen cursus html. In dit deel geven we enkele elementen van de taal die we 
dan gebruiken in voorbeelden. 


HTML, HyperText Markup Language is een op opmaaktaal voor webpagina's. HTML 
bestaat uit tekst met markeringstekens die aangegeven hoe de tekst moet worden 
geïnterpreteerd en opgemaakt. Zo'n markering wordt een tag genoemd. Een 
wezenlijke eigenschap van HTML is dat deze hypertekst ondersteunt: documenten 
verwijzen naar andere documenten met hyperlinks of koppelingen. 


De structuur van een html-pagina 

Voorbeeld: 

Eenvoudige html-pagina’s kan je maken met een tekst-editor. Voor complexere 
pagina’s gebruik je een echte web-editor. . Maak het document hieronder en 
bewaar het als file.html. 


<SI-eeneneeneneneneenvenenn 
index.html 


24 februari 2022 
<html> 
<head> 
<title>voorbeeldpagina</title> 
</head> 
<body> 
<h1i>mijn eerste webpagina</h1> 
<p>Hello world</p> 
<a href="http://www.google.com">zoeken op Internet</a> 


</body> 


</html> 
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Bestand 
index 
24 f 

<htmd> 

<head> 


</head> 


<body> 


</body> 


</html> 


À index.html - Kladblok == x 


Bewerken Opmaak Beeld Help 


„html 


ebruari 2022 


<title>voorbeeldpagina</title> 


<hi>mijn eerste webpagina</h1> 
<p>Hello world</p> 
<a href="http://www.google.com">zoeken op Internet</a> 


Figuur 122: index.html in notepad 


Een HTML-pagina is opgebouwd uit HTML-elementen. Die hebben een start tag 


(startlabel) en meestal ook een end tag (eindlabel). De voornaamste tags zijn: 


commentaar staat tussen <!-- en --> 

<html> en </html> duiden begin en eind van het HTML-document aan. 
<head> en </head> duiden de header van het document aan, die data zoals 
de pagina-titel bevat. 

<body> en </body> geven de concrete inhoud van het document. 

<h1>, </h1>, <h2>, </h2> maken titels op de webpagina. 

<p> en </p> bakenen een tekstalinea af. 

<img> geeft de weergave van een afbeelding. 

<a> en </a> voor het invoegen van een (hyper)link. Op het scherm 
verschijnt “zoeken op Internet met een link naar de google-site. 


<br> gaat naar een volgende regel 


Bewaar het document. Open het document in een browser en je krijgt volgend 


resultaat: 
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v 5 X 


@ vaorbeeldpagina Xx + 
GG Ò @ File | D:/boeken/boek6/micropython-v1_… (2 ® 2 EE (6) : 
ol How to Set Up the. LA] Free PHP charts an. ® Stephen Hawking a. ” [E] Reading list 


mijn eerste webpagina 


Hello world 


zoeken op Internet 


Figuur 123: index.html in een browser 


HTML-head 
De head-sectie van een HTMLM-pagina staat tussen tags <head> en </head>. Daar 
kan je volgende tags gebruiken: 


e <title> definieert de titel van het document. Deze staat in de titelbalk van 
de browser ‘(de blauwe balk in de figuur hierboven) en in de tabs van de 
verschillende pagina’s van de browser. 

e <link> geeft een referentie naar een extern stijlblad of een Javascript 
bestand. Die gaan we niet gebruiken in onze eenvoudige voorbeelden. 

e _<meta> geeft meta-informatie van het document zoals beschrijving, de 
auteur, taal, … 


Voorbeeld: 
<head> 
<title> cursus HTML </title> 
<meta name = “Keywords” content = “HTML, PHP, Raspberry” /> 
<meta name = “Description” content = “Boek Raspberry P en HTML” /> 
<link rel=”stylesheet” type = “tekst/css” href = “/cursus.css” /> 


Description en Keywords worden gebruikt door zoekmachines zoals Google. 
Belangrijk is ook de title-tag die aangeeft waarover het document gaat. Web-editors 
maken een uitgebreide <head>-sectie. Voor de eenvoudige voorbeelden uit dit boek 
is dat niet nodig, voor ingewikkelde websites met een uitgewerkte vormgeving kan 
dat wel belangrijk zijn. 
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HTML-body: headings, paragraphs, break 
In volgend voorbeeld laten we de effecten zien van een aantal veel gebruikte tags: 


e _<h1i>, <h2>, … voor headings of titels. 


e <p>en </p> begrenzen een paragraaf. 


e _<br>of <br /> begint een nieuwe regel. 


In het voorbeeld laten we alleen het stuk tussen <body> en </body zien, de rest kan 


je er zelf bijvoegen. 


<body> 


<hi> een h1 titel </hi> 
<h2> een h2 titel </h2> 
<h6> een h6 titel </h6> 


<p> Dit is een paragraaf </p> 
<p> Dit is een tweede en hier <br /> begint een 


nieuwe regel</p> 
</body> 


@ voorbeeldpagina 


GC Ô © File 


ol How to Set Up the. LA] Free PHP charts an… 


een hl titel 


een h2 titel 


een hó titel 


Dit is een paragraaf 


Dit is een tweede en hier 
begint een nieuwe regel 


xt 


D:/boeken/boek6/micropython-v1_…. WP % 


Stephen Hawking a… 


— X 


a*@®: 


» [El Reading list 


HTML-body: lijsten 


Figuur 124: titels in html 


Een ander structuurelement in HTML is de lijst. Dat is een opsomming van een aantal 


items onder elkaar. Met <ol> worden de items genummerd, met <ul> worden ze 


voorafgegaan door opsomtekens. De afzonderlijke items krijgen tag <li>. 


<body> 
<ul> 


<li> Jan </li> 
<li> Piet </li> 


</ul> 
<ol> 


<li> Joris </li> 
<li> Korneel </li> 


</ol> 
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</body> 


hd an X 
@ voorbeeldpagi: X | @ titels.html X @ ljst-uc.ntmi Xx + 
CG ÔQ © File | D:/boeken/boek6/micropython-v1_… (2 % ‚A * ® 5 
Holl How to Set Up the. LA] Free PHP charts an… B Stephen Hawking a. » EE] Reading list 
e Jan 
e Piet 
1. Joris 
2. Korneel 


Figuur 125: lijsten in html 


Tabellen in html 


Tabellen worden op grote schaal gebruikt in HTML-pagina's. Dit heeft zeker te maken 
met de mogelijkheden die tabellen bieden bij het geven van de gewenste lay-out aan 
een document. Hiermee kan je op een eenvoudige manier tekst en andere inhoud 
op de gewenste plaats zetten in een document. 


Een tabel staat tussen tags <table> en </table> en bevat cellen. Cellen naast elkaar 
vormen een rij, cellen onder elkaar een kolom. Een rij staat tussen tags <tr> en </tr>. 
Cellen staan tussen <td> en </td> of tussen <th> en </th>. <th> wordt gebruikt voor 
titelcellen (header cells), <td> voor gewone cellen. 


Voorbeeld: html-code voor een tabel, 3 rijen, 2 kolommen. 


<html> 
<body> 
<table border="1”> 
<tr> 
<th>nr</th> 
<th>naam</th> 
</tr> 
<tr> 
<td>1</td> 
<td>Jan</td> 
</tr> 
<tr> 
<td>2</td> 
<td>Piet</td> 
En 
</body> 
</html> 
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@ voo x | @ tiet X | B lijst X | O tabe DO tex + 
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nr 


naam 


Jan 


SRI 


Piet 
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Figuur 126: tabellen in html 
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